<page-bar></page-bar>

<div nz-row nzGutter="12">
  <div nz-col nzMd="6">
    <div class="card">
      <div class="card__bd">
        <!-- <nz-input-group style="width: 75%" [nzSuffix]="suffixIcon">
          <input type="text" nz-input placeholder="Search" [(ngModel)]="searchValue" />
        </nz-input-group> -->
        <ng-template #suffixIcon>
          <i nz-icon nzType="search"></i>
        </ng-template>
        <div class="treeArea" style="max-height: 600px; overflow: auto; border: 1px solid #ddd">
          <ng-template #iconTpl>
            <img style="width: 64px; height: 41px;" src="./assets/svg/nodata.svg">
          </ng-template>
          <nz-empty class="ant-empty-small" *ngIf="nodes.length === 0" [nzNotFoundImage]="iconTpl"></nz-empty>

          <ng-template #nzTreeTemplate let-node>
            <span class="custom-node">
              <span>
                <span [class.active]="activedNode?.key === node.key">{{ node.title }}</span>
                <span *ngIf="activedNode?.key === node.key" style="margin-left: 5px;">
                  <nz-button-group>
                    <button *ngIf="auth_dept_add" type="button" nz-button nzSize="small" nz-tooltip nzTooltipTitle='添加'
                      (click)="showAddForm($event)"><i nz-icon nzType="plus" nzTheme="outline"></i></button>
                    <button *ngIf="auth_dept_edit" type="button" nz-button nzSize="small" nz-tooltip nzTooltipTitle='修改'
                      (click)="startEdit($event)"><i nz-icon nzType="edit" nzTheme="outline"></i></button>
                    <button *ngIf="auth_dept_del" type="button" nz-button nzSize="small" nz-tooltip nzTooltipTitle='删除'
                      (click)="delDept($event)"><i nz-icon nzType="delete" nzTheme="outline"></i></button>
                  </nz-button-group>
                </span>
              </span>
            </span>
          </ng-template>

          <nz-tree [nzHideUnMatched]="true" [nzData]="nodes" [nzSearchValue]="searchValue" [nzShowLine]="true"
            [nzDraggable]="false" [nzExpandAll]="true" (nzClick)="nzEvent($event)" (nzExpandChange)="nzEvent($event)"
            (nzSearchValueChange)="nzEvent($event)" [nzTreeTemplate]="nzTreeTemplate">
          </nz-tree>
        </div>
      </div>
    </div>
  </div>
  <div nz-col nzMd="18">
    <nz-spin [nzSpinning]="loading">
      <div class="card" style="border: 1px solid #ddd; box-shadow: 1px 1px 5px #ccc">
        <div class="card__hd" style="border-bottom: 1px solid #eee;padding: 10px">
          <a *ngIf="auth_dept_add" class="brand-color" (click)="showAddForm($event)">新建<i nz-icon nzType="plus-circle"
              nzTheme="outline" class="ml-sm"></i></a>
        </div>
        <div class="card__bd" style="padding: 12px;">
          <sf #sf *ngIf="showAdd" [schema]="schemaForAdd" [button]="null" (formSubmit)="sfSubmitForAdd($event)">
            <button type="submit" nzType='primary' nz-button [disabled]="!sf.valid">添加</button>
            <button type="button" (click)="cancel()" nz-button>取消</button>
          </sf>
          <sf #sf *ngIf="!showAdd" [schema]="schema" [button]="null" (formSubmit)="sfSubmit($event)">
            <button type="submit" nzType='primary' nz-button *ngIf="showEditBtn" [disabled]="!sf.valid">更新</button>
            <button type="button" nz-button *ngIf="showEditBtn" (click)="closeEdit()">取消</button>
          </sf>
        </div>
      </div>
    </nz-spin>
  </div>
</div>
